<template>
  <div class="form-config-container">
    <el-form
      ref="formConfig"
      :model="info.form"
      :rules="rules"
      label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="menuId">
            <span slot="label">父级菜单
              <el-tooltip content="菜单生成的上级菜单" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <tree-select
              size=""
              :value="info.form.menuId"
              :list="menus"
              :props="infoProps"
              :clearable="true"
              :accordion="true"
              @getValue="(value) => {info.form.menuId = value}"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表单结构" prop="type">
            <el-select
              style="width: 100%;"
              v-model="info.form.type" placeholder="请选择表单结构">
              <el-option label="单表" value="0"></el-option>
              <el-option label="树表" value="1"></el-option>
              <el-option label="子主表" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="info.form.type === '1'" :span="12">
          <el-form-item prop="treeName">
            <span slot="label">树表键字段
              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-select
              style="width: 100%;"
              clearable
              v-model="info.form.treeName" placeholder="请选择树表键字段">
              <el-option
                v-for="item in info.column"
                :key="item.prop"
                :label="item.prop + '：' + item.label"
                :value="item.prop">
                <span>{{ item.prop + '：' + item.label }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="info.form.type === '2'">
          <span class="card-title">子表单信息</span>
          <el-button
            type="text"
            style="float: right;"
            icon="el-icon-plus"
            @click="childForm.visible = true">
            添加
          </el-button>
          <el-table
            border
            :data="childTable"
            :header-cell-style="{backgroundColor: '#fff'}">
            <el-table-column label="关联表名（必填）" prop="tableName">
              <template slot-scope="scope">
                <el-select
                  clearable
                  style="width: 100%;"
                  :disabled="true"
                  v-model="scope.row.prop" placeholder="请选择">
                  <el-option
                    v-for="form in childTable"
                    :disabled="form.type === 'childForm'"
                    :key="form.prop"
                    :label="form.label + '：' + form.prop"
                    :value="form.prop">
                    <span>{{ form.label + "：" + form.prop }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="关联表字段（必填）" prop="foreignKey">
              <template slot-scope="scope">
                <el-select
                  style="width: 100%;"
                  clearable
                  v-model="scope.row.foreignKey" placeholder="请选择">
                  <el-option
                    v-for="column in scope.row.plugin.option.column"
                    :key="column.prop"
                    :label="column.label + '：' + column.prop"
                    :value="column.prop">
                    <span>{{ column.label + '：' + column.prop }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  :disabled="scope.row.type === 'childForm'"
                  @click="handleDelete(scope.$index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>

    <!--选择需要绑定的表单-->
    <el-dialog
      title="选择需要绑定的表单"
      append-to-body
      close-on-click-modal
      :visible.sync="childForm.visible">
      <el-table border height="360px" @row-click="childFormRowClick" :data="childForm.list">
        <el-table-column type="index" width="100" align="center" label="序号"></el-table-column>
        <el-table-column prop="tableComment" label="表单描述"></el-table-column>
        <el-table-column prop="tableName" label="表单名"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import treeSelect from '@/components/TreeSelect';
import {getColumnsByDictType, getMenuTree, listForms} from "@/api/toolkit/form";

export default {
  name: "FormConfig",
  components: {
    treeSelect
  },
  props: {
    info: {
      type: Object,
      default() {
        return {
          formTypes: [],
          form: {
            menuId: "",
            groupId: "",
            type: "0",
            treeName: ""
          },
          column: []
        }
      }
    }
  },
  watch: {
    "info.column": {
      immediate: true,
      deep: true,
      handler(list) {
        let childTable = list.filter(item => item.type === "childForm");
        this.childTable = this.childTable.filter(item => item.type !== "childForm");
        this.childTable.push(...childTable);
      }
    }
  },
  data() {
    return {
      childTable: [],
      menus: [],
      childForm: {
        list: [],
        visible: false
      },
      infoProps: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      rules: {
        menuId: [
          {required: true, message: "请选择父级菜单", trigger: "change"}
        ],
        type: [
          {required: true, message: "请选择表单结构", trigger: "change"}
        ],
        groupId: [
          {required: true, message: "请选择表单分组", trigger: "change"}
        ],
        treeName: [
          {required: true, message: "请选择树表键字段", trigger: "change"}
        ]
      }
    }
  },
  methods: {
    /**删除关联表单*/
    handleDelete(data) {
      this.childTable.splice(data, 1);
    },
    /**选择关联子表单*/
    childFormRowClick(row) {
      const tableOption = {
        foreignKey: "",
        childType: "relationTable",
        prop: row.tableName,
        label: row.tableComment,
        plugin: {
          option: {column: []}
        }
      }
      getColumnsByDictType(row.tableName).then(response => {
        if (response.data) {
          response.data.map(map => {
            map.label = map.columnComment;
            map.prop = map.columnName;
            return map;
          })
          tableOption.plugin.option.column = response.data;
          this.childTable.push(tableOption);
          this.childForm.visible = false;
        }
      })
    },
    /**获取菜单树*/
    getMenuTreeData() {
      getMenuTree().then(res => {
        this.menus = res.data;
      })
    },
    /**获取表单列表*/
    getFormList() {
      listForms().then(response => {
        if (response.data) {
          this.childForm.list = response.data;
        }
      })
    }
  },
  created() {
    this.getMenuTreeData();
    this.getFormList();
  }
}
</script>

<style scoped lang="scss">
.form-config-container {
  padding: 50px 20% 0 20%;
  height: calc(100vh - 45px);
  overflow-y: auto;

  .card-title {
    position: relative;
    padding-left: 8px;
    line-height: 30px;
    font-weight: 700;
    color: #606266;

    &:before {
      position: absolute;
      top: 1px;
      display: block;
      content: "";
      width: 3px;
      height: 14px;
      background-color: #48a2ff;
    }
  }
}

::v-deep .el-form-item__label {
  padding: 0;
}

::v-deep .el-card__body {
  padding: 0;
}
</style>
